<template>
	<view class="">
		<view class="activity-list flex-box" :class="{'hasLine':hasLine}" v-for="item in activityList" @click="goDetails(item)">
			<view class="activity-img-box ">
				<image :src="item.image" mode="aspectFill"></image>
			</view>
			<view class="activity-content margin-l-20 flex-1 flex-column">
				<view class="name only-1">{{item.title}}</view>
				<view class="only-1 content">
                    <u-parse :content="item.content"></u-parse>
                </view>
				<view class="time flex-box">
					<view class="flex-1">活动时间：{{item.end_date}}</view>
					<text @click="signUp(item)" v-if="item.isBeforeStart || item.isAfterEnd || item.is_sign >0" class="bg-db" >我要报名</text>
                    <text @click="signUp(item)"  v-else class="bg-43">我要报名</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			activityList: {
				type: Array,
				default: () => []
			},
			hasLine:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {

			}
		},
		methods:{
			goDetails(item) {
				this.$emit('goDetails', item)
			},
			signUp(item){
                if(item.isAfterEnd){
                    return  uni.showToast({
                        title:'活动已结束',
                        icon:'none'
                    })
                }
                if(item.isBeforeStart){
                    return  uni.showToast({
                        title:'活动还未开始',
                        icon:'none'
                    })
                }
                if(item.is_sign){
                    return  uni.showToast({
                        title:'活动已报名',
                        icon:'none'
                    })
                }
				this.$emit('signUp', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activity-list {
		padding: 20rpx 0 30rpx;

		&.hasLine {
			border-bottom: 1px solid #DBDBDB;
		}
		&:last-child {
			border-bottom: 0;
		}

		.activity-img-box {
			width: 180rpx;
			height: 180rpx;
			min-width: 180rpx;
			border-radius: 14rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.activity-content {
			justify-content: space-between;
			overflow: hidden;

			.name {
				color: #000;
				font-size: 30rpx
			}

			.content {
                height: 50rpx;
				color: #707070;
				font-size: 24rpx
			}

			.time {
				height: 60rpx;
				background: #F7F7F7;
				border-radius: 14rpx;
				line-height: 60rpx;
				padding-left: 10rpx;
				font-size: 24rpx;
				color: #333;

				text {
					width: 146rpx;
					height: 60rpx;
					color: #fff;
					text-align: center;
					border-radius: 0 14rpx 14rpx 0;
				}
			}
		}
	}
</style>
